{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}琢越网{% endblock %}

{% block custom_js %}<script src="/static/js/jquery-3.3.1.min.js"></script>{% endblock %}
{% block custom_css %}<link rel="stylesheet" href="/static/css/mystyle.css">{% endblock %}

{% block content %}
    <div class="row clearfix">
        <div class="col-md-9 column ">
            <div  class="row clearfix col-div"><!话题展示>
                <div class="media" style="margin:10px 10px 5px 10px">
                    {% for label in labels %}
                    <span class="label label-warning">{{ label.label_content }}</span>
                    {% endfor %}
                    <p class="pull-right tool">{{ topic.published_time }}</p> <!!!>
                    <p class="pull-right tool">发表于：</p>
                    <h4 class="col-h4">{{ topic.topic_title }}<span class="badge col-badge col-badge-t">话题</span></h4>
                    <p>{{ topic.topic_content }}</p>
                    <a onclick="collect()" role="button" class="btn tool" data-toggle="modal">
                        <span class="glyphicon glyphicon-star" ></span>收藏
                    </a>
                    <a onclick="copyUrl()" role="button" class="btn tool" data-toggle="modal">
                        <span class="glyphicon glyphicon-link" ></span>分享
                    </a>
                    <a href="#modal-container-tip-off" role="button" class="btn tool" data-toggle="modal">
                        <span class="glyphicon glyphicon-exclamation-sign" ></span>举报
                    </a>
                    <!举报模态框>
                    <div class="modal fade" id="modal-container-tip-off" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header"> <!头>
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title" id="myModalLabel">举报</h4>
                                </div>
                                <div class="modal-body"> <!中间部分>
                                    <textarea class="form-control" style="height:200px" placeholder="请填写举报信息"></textarea>
                                </div>
                                <div class="modal-footer"> <!脚>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a role="button" class="but-click btn tool" data-toggle="modal">
                        <span class="glyphicon glyphicon-pencil" ></span>评论
                    </a>
                    <p class="pull-right tool" style="">{{ topic.topic_reading_quantity }}</p> <!!!>
                    <label class="pull-right tool">浏览：</label>
                    <p class="pull-right tool">xxx</p> <!!!>
                    <label class="pull-right tool">收藏：</label>
                    <a href="#" class="pull-right tool" target=_blank style="text-decoration:none;color:black;"><p class="tool">{{ topic.userprofile_id.username }}</p></a>
                    <a href="#" class="pull-right" target=_blank><img src="{% static 'img/2.jpg' %}"  width=40px height=40px/></a>
                </div>
                <form action="{% url "topic:comment_action" %}" method="POST">
                    {% csrf_token %}
                    <div  class="remark-div" style="display:none" >
                        <input name="topic_id" type="hidden" value="{{ topic.id }}">
                        <textarea name="topic_comment" class="form-control" width=100% style="margin:5px 0px 5px 0px" placeholder="请写下您的评论"></textarea>
                        <button type="submit" class="btn btn-default pull-right publish">发表</button>
                    </div>
                </form>
            </div>
            {% for topic_comment in topic_comments %}
            <div class="row row-mar-lg clearfix col-div"><!评论展示1>
                <div class="media"  style="padding:10px 10px 5px 10px">
                    <a href="#" target=_blank class="pull-left"><img src="{% static 'img/2.jpg' %}"  width=40px height=40px/></a>
                    <div class="media-body">
                            <a href="#" target=_blank style="text-decoration:none;color:black;">
                                <h4 class="media-heading">{{ topic_comment.userprofile_id.username }}</h4>{{ topic_comment.userprofile_id.introduction }}<br/>
                            </a>
                            <div class="media col-remark-bk">
                                <p>{{ topic_comment.topic_comment_content }}</p>
                            </div>
                        <a role="button" class="btn tool">
                            <span class="glyphicon glyphicon-thumbs-up" ></span>点赞</a>
                        <a role="button" class="btn tool">
                            <span class="glyphicon glyphicon-thumbs-down" ></span>没用</a>
                        <a onclick="copyUrl()" role="button" class="btn tool">
                            <span class="glyphicon glyphicon-link" ></span>分享
                        </a>
                        <a onclick="collect()" role="button" class="btn tool">
                            <span class="glyphicon glyphicon-star"></span>收藏
                        </a>
                        <a href="#modal-container-tip-off" role="button" class="btn tool" data-toggle="modal">
                            <span class="glyphicon glyphicon-exclamation-sign" ></span>举报
                        </a>
                        <!举报模态框>
                        <div class="modal fade" id="modal-container-tip-off" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header"> <!头>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title" id="myModalLabel">举报</h4>
                                    </div>
                                    <div class="modal-body"> <!中间部分>
                                        <textarea class="form-control" style="height:200px" placeholder="请填写举报信息"></textarea>
                                    </div>
                                    <div class="modal-footer"> <!脚>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a role="button" class="but-click btn tool" data-toggle="modal">
                            <span class="glyphicon glyphicon-pencil" ></span>评论
                        </a>
                        <p class="pull-right tool">人评论</p>
                        <p class="pull-right tool">{{ topic_comment.topic_comment_comment_num }}</p> <!!!>
                        <!评论框>
                        <form action="{% url "topic:respect_action" %}" method="POST">
                        {% csrf_token %}
                            <div  class="remark-div" style="display:none" >
                                <input name="topic_id" type="hidden" value="{{ topic.id }}">
                                <input name="comment_userprofile_id" type="hidden" value="">
                                <input name="topic_comment_id" type="hidden" value="{{ topic_comment.id }}">
                                <textarea name="topic_respect" class="form-control" width=100% style="margin:5px 0px 5px 0px" placeholder="请写下您的评论"></textarea>
                                <button type="submit" class="btn btn-default pull-right publish">发表</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!--评论的评论展示-->
                <div class="sub-div ">
                    {% for topic_respect in topic_respects %}
                        {% if topic_respect.topic_respect_profile_id == topic_comment %}
                    <div class="sub-margin"> <!--评论的评论1-->
                        <div><!--这个div为了凑数的……可忽略-->
                            {% if topic_respect.comment_userprofile_id is null %}
                                <a class="btn tool " href="#" target=_blank>{{ topic_respect.userprofile_id.username}}</a>：{{ topic_respect.topic_respect_content }}
                            {% else %}
                                <a class="btn tool " href="#" target=_blank>{{ topic_respect.userprofile_id.username}}</a>
                                回复
                                <a class="btn tool " href="#" target=_blank>{{ topic_respect.comment_userprofile_id }}</a>：{{ topic_respect.topic_respect_content }}
                            {% endif %}

                            <a role="button" class="but-click btn tool " data-toggle="modal">
                                <span class="glyphicon glyphicon-pencil" >回复</span>
                            </a>

                            <!--评论框-->
                            <form action="{% url "topic:respect_action" %}" method="POST">
                            {% csrf_token %}
                                <div  class="remark-div" style="display:none" >
                                    <input name="topic_id" type="hidden" value="{{ topic.id }}">
                                    <input name="topic_comment_id" type="hidden" value="{{ topic_comment.id }}">
                                    <input name="comment_userprofile_id" type="hidden" value="{{ topic_respect.userprofile_id }}">
                                    <textarea name="topic_respect" class="form-control" width=100% style="margin:5px 0px 5px 0px" placeholder="请写下您的评论"></textarea>
                                    <button type="submit" class="btn btn-default pull-right publish">发表</button>
                                </div>
                            </form>
                        </div>
                    </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="col-md-3 column"> <!右部分>
            <div class="row clearfix col-div"> <!推荐话题>
                <h4 class="text-center col-h4">推荐话题</h4>
                <hr>
                <div class="right-div">
                    <a href="#" target==_blank class="right-text">话题1</a>
                    <br><a href="#" target==_blank class="right-text">话题2</a>
                </div>
            </div>
        </div>
	</div>
{% endblock %}
{% block custom_script %}
    <script>
    // -对评论框的控制-
	$(document).ready(function(){
		var div;
		// 显示or隐藏评论框
		$(".but-click").click(function(){
			div= $(this).parent("div").parent("div").find(".remark-div"); //取button的div父级d的div父级，再通过.remark-div类找到评论框
			var display = div.css("display");
			if( display=="none")
				div.css("display","block");
			else
				div.css("display","none");
			//div[0].style.display = "block"; //设置div的style为可见
		});
		// 判断评论是否有效
		$(".publish").click(function(){
			var comment =  $(this).parent("div").find("textarea")[0].value;
			console.log(comment);
			/*if( typeof(comment)=="undefined" || comment=="")
				alert("评论为空！");
			else{
				div.css("display","none");
				alert("发表成功!");
			}*/
		});
	});
	//var collectFlag = 1;
	function collect(){
		alert("收藏成功!")
	/*	if( collectFlag==1){

			collectFlag = 2;
		}
		else{
			alert("已取消收藏!")
			collectFlag = 1;
		}
	*/
	}
	function copyUrl()
   {
		var clipBoardContent=this.location.href;  // 这个方法firefox会报错！IE适用
		window.clipboardData.setData("Text",clipBoardContent);
		alert("文章链接复制成功!");
   }
</script>
{% endblock %}